<template>
	<view class="index_box animated fadeInLeft" @tap="toDetail">
		<view class="index_box_head flex_item">
			<view class="head_nickName flex_item">
				<image :src="item.userpic" mode="widthFix"></image>
				<view>{{item.nickName}}</view>
			</view>
			<view class="head_follow flex_item" v-show="!isFollow" @tap="tabFollow">
				<view class="icon iconfont icon-zengjia btnfollow"></view> 关注
			</view>
		</view>
		<view class="index_box_text">{{item.title}}</view>
		<view class="index_box_img">
			<image :src="item.titlePic"></image>
			<template v-if="item.type=='video'">
				<view class="icon iconfont icon-bofang btnPlay"></view>
				<view  class="playText">{{item.playnum}}次播放量 {{item.long}}</view>
			</template>
			
		</view>
		<view class="index_box_function">
			<view class="function_left flex_item">
				<view class="flex_item" @tap="isfabulous(1)">
					<view class="icon iconfont icon-smile" :class="{'active':item.info.infoOperater==1}"></view>
					<view>{{item.info.laugh}}</view>
				</view>
				<view class="flex_item" @tap="isfabulous(2)">
					<view class="icon iconfont icon-kulian" :class="{'active':item.info.infoOperater==2}"></view>
					<view>{{item.info.cry}}</view>
				</view>
			</view>
			<view class="function_right flex_item">
				<view class="flex_item">
					<view class="icon iconfont icon-pinglun1"></view>
					<view>{{item.infoOperater}}</view>
				</view>
				<view class="flex_item">
					<view class="icon iconfont icon-zhuanfa"></view>
					<view>{{item.forward}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['item'],
		data(){
			return{
				isFollow:this.item.isFollow,
			}
		},
		mounted() {
			this.item=this.item;
		},
		methods:{
			tabFollow(){
				this.isFollow=true;
				uni.showToast({
					title: '关注成功'
				});
			},
			toDetail(){
				console.log(this.item)
				uni.navigateTo({
					url: '../../pages/index-detail/index-detail?data='+JSON.stringify(this.item),
				});
			},
			isfabulous(val){
				// console.log(val)
				switch (val){
					case 1:
					if(this.item.info.infoOperater==val){return}
					if(this.item.info.infoOperater!=val){
						this.item.info.laugh+=1;
						this.item.info.infoOperater=1;
						this.item.info.cry--;
					}
					break;
					case 2:
					if(this.item.info.infoOperater==val){return}
					if(this.item.info.infoOperater!=val){
						if(this.item.info.cry==0){
							this.item.info.cry=this.item.info.cry;
						}else{
							this.item.info.cry+=1;
							this.item.info.laugh--
						}
						
						this.item.info.infoOperater=2;
					};
					break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex_item{
		display: flex;
		align-items: center;
	}
	.index_box{
		padding: 20upx;
		border-bottom: 1px solid #EEEEEE;
		.index_box_head{
			justify-content: space-between;
			.head_nickName{
				font-size: 30px;
			}
			.head_follow{
				font-size: 25upx;
			}
			.head_nickName image{
				border-radius: 50%;
				width: 90upx;
				height: 90upx;
				margin-right:20upx ;
			}
			.head_follow{
				background-color: #F4F4F4;
				border-radius: 5px;
				padding:0 14upx;
				font-size: 14upx;
			}
		}
		.index_box_text{
			padding: 20upx 0;
			font-size: 32upx;
		}
		.index_box_img{
			position: relative;
		}
		.index_box_img image{
			width: 100%;
			border-radius: 20upx;
		}
		.btnPlay{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			font-size: 100upx;
			color: #FFFFFF;
		}
		.playText{
			position: absolute;
			bottom: 20upx;
			right: 10upx;
			background: #525738;
			color: #FFFFFF;
			padding: 5upx 10upx;
			border-radius: 40upx;
			font-size: 14upx;
			// opacity: 0.6;
		}
		.index_box_function{
			display: flex;
			justify-content: space-between;
			 .flex_item view{
					margin: 0 5upx;
			}
			.active{
				color:#1AAD19
			}
		}
	}
</style>
